<template>
  <div class="container">
    <div class="nav">
      <div class="links"></div>
      <div class="links"></div>
      <div class="links"></div>
      <div class="links"></div>
      <div class="links"></div>
      <div class="links"></div>
      <div class="login">
        <a href="">小明 [已登录]</a>
      </div>
      <div class="links"></div>
    </div>
    <div class="center">
      <div class="left">
        <el-menu default-active="7" class="el-menu-vertical-demo">
          <el-menu-item index="7" @click="routeTo('/index')">
            <i class="el-icon-user-solid"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <el-menu-item index="1" @click="routeTo('/index/store')">
            <i class="el-icon-s-shop"></i>
            <span slot="title">店铺信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="routeTo('/index/product')">
            <i class="el-icon-link"></i>
            <span slot="title">我的商品</span>
          </el-menu-item>
          <el-menu-item index="2" @click="routeTo('/index/addProduct')">
            <i class="el-icon-sell"></i>
            <span slot="title">发布商品</span>
          </el-menu-item>
          <el-menu-item index="4" @click="routeTo('/index/bill')">
            <i class="el-icon-document"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="6" @click="exit">
            <i class="el-icon-close"></i>
            <span slot="title" >退出登录</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  methods: {
    exit() {
      this.$router.replace("/");
    },
    routeTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  /* display: flex; */
  display: flex;
  flex-direction: column;
}

.nav {
  flex: 2;
  background-color: #f2f6fc;
  border-bottom: 1px solid gray;
  width: 100%;
  display: flex;
  /* position: fixed; */
}

.links {
  flex: 1;
}

.login {
  flex: 1;
  display: flex;
  align-items: center;
}

.login a {
  color: #909399;
  font-size: 14px;
  text-decoration: none;
  margin: auto;
}

.login a:hover {
  color: rgb(241, 164, 92);
}

.center {
  flex: 30;
  display: flex;
}

.left {
  flex: 1;
  border-right: 1px solid gray;
}

.main {
  flex: 5;
}
</style>